<!DOCTYPE html>
<!-- Bootstrap用到的HTML元素和CSS属性需要HTML5 doctype。因此每个使用Bootstrap的页面都应该包启HTML5声明。-->

<html lang="zh-CN">
  <!-- lang属性表示当前文档显示的语言，在很多国际化的网站中会遇到，zh-CN定义语言为中文，en定义语言为英语 -->
  <!-- html lang="zh-CN"解决Mac版Firefox中文字体显示问题，Bootstrap也建议加上 -->
  <head>
    <title>病人集成视图</title>
	<meta charset="utf-8">
	<link rel="shortcut icon" href="../assets/images/logo-icon.jpg" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link type="text/css" href="../assets/css/bootstrap.min2.css" rel="stylesheet" />
	<link type="text/css" href="../assets/css/bootstrap-switch.css" rel="stylesheet">
	<style>
		*{
			font-family:"微软雅黑","黑体","宋体"; 
		}
		.space_lg{
			height:50px;
			clear: both;
			text-align:right;
		}
		.space_md{
			height:30px;
			clear: both;
		}
		.space_sm{
			height:10px;
			clear: both;
			
		}
		.space_demo{
			border-bottom:1px solid black;
		}
		
		@media (min-width: 768px) {
		.container {
			width: 750px;
		  }
		  #scrollDiv{
			left:0px;
		  }
		}
		@media (min-width: 992px) {
		  .container {
			width: 990px;
		  }
		  #scrollDiv{
			left:0px;
		  }
		}
		@media (min-width: 1200px) {
		  .container {
			width: 1200px;
		  }
		}
		@media (min-width: 1400px) {
		  .container {
			width: 1350px;
		  }
		}
		@media (min-width: 1800px) {
		  .container {
			width: 1750px;
		  }
		  #scrollDiv{
			left:180px;
		  }
		}
		
		.lnk-tools {
			position:fixed;
			bottom:180px;
			right: 80px;
			_position:absolute;
			z-index:999;
			_top:expression(documentElement.scrollTop);
		}
		.lnk-tools button{width: 100px;}
	</style>
  </head>

  <body data-target="#scrollDiv" data-offset="0" data-spy="scroll">

	
  
    <!-- 导航栏 -->
    <iframe src="header.html" style="margin-left:5%" width="80%" height= "10%" name="topFrame" 
scrolling="No"  noresize="noresize" frameborder="0" id="topFrame"></iframe>
	<!-- Start Menu Area -->
					<div class="navbar-collapse collapse" style="margin-right:30%;margin-top:-5%" >
						<ul class="nav navbar-nav navbar-right">
							<li><a href="index.html" >首页</a></li>
							<li ><a href="about.html" >关于我们</a></li>
							
							
									<li><a href="doctors.html" >医生</a></li>
							
							
									<li><a href="departments.html" >科室部门</a></li>
						
							
							<li><a href="contact.html" >联系</a></li>
						</ul>
					</div>
					<!-- Start Menu Area -->

	<div class="container" style="margin-top:80px;">
		<div class="row">
			<div class="col-md-8">
				<div class="jumbotron" style="height:120px;padding:10px;" >
					<div class="row">
						<div class="col-md-2">
							<img src="../assets/images/people.jpg" style="height:100px;" class="img-thumbnail">
						</div>
						<div class="col-md-7" style="margin-left: -15px">
							<h3 class="text-info">刘兰花&nbsp;<span class="label label-warning">女</span>&nbsp;&nbsp;<span class="label label-primary">24</span></h3>
							<span class="text-info"><strong>最近一次就诊：</strong></span><span class="text-primary">2012/03/03</span>&nbsp;<strong>|</strong>&nbsp;
							<span class="text-info"><strong>最近一次诊断：</strong></span><span class="text-primary">心血管疾病</span>&nbsp;<strong>|</strong>&nbsp;
							<img src="../assets/images/sc.png" style="height:30px;" title="收藏" class="img-thumbnail">
						</div>
						<div class="col-md-3">
							<p style='margin-top:30px;'><a class="btn btn-primary" role="button" href="#myModal" data-toggle="modal" >编辑个人信息&raquo;</a></p>
							
						</div>
					</div>
				</div>
			</div>
			
	<!-- 模态框（Modal）开始 -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                <h4 class="modal-title" id="myModalLabel">信息编辑</h4>
            </div>
            <div class="modal-body">
          <form>
          <input type="hidden" id="userId" name="userId">
          <div class="form-group">
          
            <label for="userName" class="control-label">用户名*</label>
            <input type="text" class="form-control" id="userName">
          </div>
          
          <div class="form-group">
          
            <label for="userSex" class="control-label">性别*</label>
            <input type="text" class="form-control" id="userSex">
          </div>
          </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                <button type="button" class="btn btn-primary">提交更改</button>
            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal -->
</div>
<!-- 模态窗口结束 -->		

			<div class="col-md-4">
				<div class="panel panel-success">
				   <div class="panel-heading">
					  <h3 class="panel-title" style="font-family:微软雅黑">病案摘要</h3>
				   </div>
				   <div class="panel-body">
					  <span class="text-info"><strong>诊断：</strong></span><span class="text-primary">十二指肠破裂，急需治疗</span>&nbsp;<br>
					  <span class="text-info"><strong>手术：</strong></span><span class="text-primary">视网膜裂孔修补手术</span>&nbsp;<br>
					  <span class="text-info"><strong>过敏源：</strong></span><span class="text-primary">川贝</span>&nbsp;
				   </div>
				</div>
			</div>
		</div>
		<div class="row">
			<div class="col-md-8">
				<ul id="myTab1" class="nav nav-tabs bg-info">
				  <li class="active"><a href="#myLi1" data-toggle="tab">病历概要</a></li>
				  
				</ul>
				</div>
				<div id="myTabContent" class="tab-content" style="margin-left:15px">
					
					<!-- 第一块操作区 -->
					<div class="tab-pane fade in active" id="myLi1">
					    <div id="myLi11">
							<div class="space_sm"></div>
							<div class="row">
								<div class="col-md-8">
									<div class="row">
										<div class="col-md-12">
											<div class="panel panel-warning">
											   <div class="panel-heading" style="background-color:#fcf8e3;border-color:#faebcc;color:#8a6d3b;">
												  <h3 class="panel-title" style="color:#8a6d3b;font-family:微软雅黑">病人基本信息</h3>
											   </div>
											   <div class="panel-body">
												  <span class="text-info"><strong>患者姓名：</strong></span><span class="text-primary">刘兰花</span>&nbsp;<strong>|</strong>&nbsp;
												  <span class="text-info"><strong>年龄：</strong></span><span class="text-primary">24</span>&nbsp;<strong>|</strong>&nbsp;
												  <span class="text-info"><strong>性别：</strong></span><span class="text-primary">女</span>&nbsp;<strong>|</strong>&nbsp;
												  <span class="text-info"><strong>婚姻状况：</strong></span><span class="text-primary">已婚</span>
												  <br>
												  <span class="text-info"><strong>国籍：</strong></span><span class="text-primary">中国</span>&nbsp;<strong>|</strong>&nbsp;
												  <span class="text-info"><strong>联系电话：</strong></span><span class="text-primary">83836632</span>&nbsp;<strong>|</strong>&nbsp;
												  <span class="text-info"><strong>出生地：</strong></span><span class="text-primary">福建省福州市</span>&nbsp;<strong>|</strong>&nbsp;
												  <span class="text-info"><strong>通讯地址：</strong></span><span class="text-primary">上海新村60-156</span>
											   </div>
											</div>
										</div>
									</div>
									<div class="space_sm"></div>
									<div class="row">
										<div class="col-md-12">
											<ul id="myTab4" class="nav nav-tabs">
											   <li class="active"><a href="#reco1" data-toggle="tab">就诊记录</a></li>
											   <li><a href="#reco2" data-toggle="tab">用药记录</a></li>
											   <li><a href="#reco3" data-toggle="tab">病史查看</a></li>
											    <li><a href="#reco4" data-toggle="tab">预约记录</a></li>
											</ul>
											<div id="myTabContent" class="tab-content">
											   <div class="tab-pane fade in active" id="reco1">
												  <div class="space_md"></div>
												  <table class="table">
												   <caption>就诊记录</caption>
												   <thead>
													  <tr>
														 <th>病症</th>
														 <th>时间</th>
														 <th>看诊医生</th>
													  </tr>
												   </thead>
												   <tbody>
													  <tr class="active">
														 <td>感冒</td>
														 <td>23/11/2013</td>
														 <td>厦门附一</td>
													  </tr>
													  <tr class="success">
														 <td>破伤风</td>
														 <td>10/11/2013</td>
														 <td>福州附一</td>
													  </tr>
													  <tr  class="warning">
														 <td>肿瘤</td>
														 <td>20/10/2013</td>
														 <td>第一医院</td>
													  </tr>
													  <tr  class="danger">
														 <td>恶性肿瘤</td>
														 <td>20/10/2013</td>
														 <td>乌海市医</td>
													  </tr>
												   </tbody>
												</table>
											   </div>
											   <div class="tab-pane fade" id="reco2">
												  <p>iOS 是一个由苹果公司开发和发布的手机操作系统。最初是于 2007 年首次发布 iPhone、iPod Touch 和 Apple 
												  TV。iOS 派生自 OS X，它们共享 Darwin 基础。OS X 操作系统是用在苹果电脑上，iOS 是苹果的移动版本。</p>
											   </div>
											   <div class="tab-pane fade" id="reco3">
												  <p>jMeter 是一款开源的测试软件。它是 100% 纯 Java 应用程序，用于负载和性能测试。</p>
											   </div>
											   <div class="tab-pane fade" id="reco4">
												   <div class="space_md"></div>
												  <table class="table">
												   
												   <thead>
													  <tr>
														 <th>医生</th>
														 <th>时间</th>
														 <th>所属部门</th>
													  </tr>
												   </thead>
												   <tbody>
													  <tr class="active">
														 <td>嘿钊</td>
														 <td>23/11/2016</td>
														 <td>门诊部</td>
													  </tr>
													  <tr class="success">
														 <td>黑钊</td>
														 <td>10/11/2016</td>
														 <td>xxx</td>
													  </tr>
													
												   </tbody>
												</table>
											   </div>
											</div>
										</div><!-- /.col-记录 -->
									</div>									
								</div>
								
							
							</div>
						</div> 
					</div>
					
					<!-- 第二块操作区 -->
					
					
					<!-- 第三块操作区 -->
					
				</div>
			
	    </div>
	</div>
	
	<div class="modal fade" id="modalTest" tabindex="-1" role="dialog">
	  <div class="modal-dialog">
		<div class="modal-content">
		  <div class="modal-header">
			<button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span></button>
			<h4 class="modal-title">登录平台</h4>
		  </div>
		  <div class="modal-body">
			<p>One fine body&hellip;</p>
		  </div>
		  <div class="modal-footer">
			<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
			<button type="button" class="btn btn-primary">Save changes</button>
		  </div>
		</div><!-- /.modal-content -->
	  </div><!-- /.modal-dialog -->
	</div><!-- /.modal -->
	
	<div class="modal fade" id="modalTest2" tabindex="-1" role="dialog">
	  <div class="modal-dialog">
		<div class="modal-content">
		  <div class="modal-header">
			<button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span></button>
			<h4 class="modal-title">检验报告</h4>
		  </div>
		  <div class="modal-body">
			<p>红细胞沉淀率测定&hellip;</p>
		  </div>
		  <div class="modal-footer">
			<button type="button" class="btn btn-primary" data-dismiss="modal">Close</button>
		  </div>
		</div><!-- /.modal-content -->
	  </div><!-- /.modal-dialog -->
	</div><!-- /.modal -->
	
    <script type="text/javascript" src="../assets/js/jquery-1.11.1.min.js"></script>
	<script type="text/javascript" src="../assets/js/bootstrap.min.js"></script>
	<script type="text/javascript" src="../assets/js/switch-need1.js"></script>
	<script type="text/javascript" src="../assets/js/bootstrap-switch.min.js"></script>
	<script type="text/javascript" src="../assets/js/switch-need2.js"></script>
	<script>
		$(function(){
			$('#modalTest').modal({
				backdrop:true,//true:有遮罩背景&点击可关闭modal;false:没遮罩&不可点击关闭;'static':有遮罩不可点击关闭（默认是true）
				keyboard:true,//键盘上的esc键被按下时关闭模态框（默认是true）
				show:false,//模态框初始化之后就立即显示出来（默认是true）
			});
			$('#switch-offColor').on('switchChange.bootstrapSwitch', function(event, state) {
				if(state){
					$("#myLi22").show();
					$("#myLi21").hide();
				}else{
					$("#myLi21").show();
					$("#myLi22").hide();
				}
			  console.log(this); // DOM element
			  console.log(event); // jQuery event
			  console.log(state); // true | false
			});
			
			$('#switch-offColor2').on('switchChange.bootstrapSwitch', function(event, state) {
				if(state){
					$("#myLi32").show();
					$("#myLi31").hide();
				}else{
					$("#myLi31").show();
					$("#myLi32").hide();
				}
			  console.log(this); // DOM element
			  console.log(event); // jQuery event
			  console.log(state); // true | false
			});
		})
	</script>
  </body>
</html>
